<template>
  <div>
    <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import {orderBigClass} from "../../../http/api";
export default {
  data() {
    return {
      chart: null,
      category: [],
      barData: [],
      yogaData: [],
      danceData: [],
      pedalData: [],
      lineData: []
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));
      orderBigClass().then(res => {
        console.log(res.data.data)
        for (let key in res.data.data) {
          this.category.push(res.data.data[key].order_date.substring(5))
          this.lineData.push(res.data.data[key].单车类)
          this.barData.push(res.data.data[key].战绳类)
          this.yogaData.push(res.data.data[key].瑜伽类)
          this.danceData.push(res.data.data[key].舞蹈类)
          this.pedalData.push(res.data.data[key].踏板类)
        }
        console.log(this.lineData)
        let option = {
          title: {
            text: "",
            x: "center",
            y: 0,
            textStyle: {
              color: "#B4B4B4",
              fontSize: 16,
              fontWeight: "normal"
            }
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["单车类", "战绳类", "瑜伽类", "舞蹈类", "踏板类"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            x: "8%",
            width: "88%",
            y: "4%"
          },
          xAxis: {
            data: [...new Set(this.category)],
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "战绳类",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              data: this.barData
            },
            {
              name: "单车类",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" }
                  ])
                }
              },
              z: -12,
              data: this.lineData
            },
            {
              name: "瑜伽类",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(243,124,128,0.8)" },
                    { offset: 0.2, color: "rgba(239,133,170,0.5)" },
                    { offset: 1, color: "rgba(238,128,177,0.2)" }
                  ])
                }
              },
              z: -12,
              data: this.yogaData
            },
            {
              name: "舞蹈类",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(225,234,59,0.8)" },
                    { offset: 0.2, color: "rgba(232,239,133,0.5)" },
                    { offset: 1, color: "rgba(238,223,128,0.2)" }
                  ])
                }
              },
              z: -12,
              data: this.danceData
            },
            {
              name: "踏板类",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(3,255,179,0.8)" },
                    { offset: 0.2, color: "rgba(133,239,218,0.5)" },
                    { offset: 1, color: "rgba(128,238,207,0.2)" }
                  ])
                }
              },
              z: -12,
              data: this.pedalData
            }
          ]
        };
        this.chart.setOption(option);
        console.log(this.category)
      })
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
